<template>
  <div class="container">
    <!-- 轮播图区域 -->
    <div class="swiper-container">
      <!-- 轮播图组件默认占满父元素的高度 -->
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in lunboList" :key="item.id">
          <img :src="item.img" alt="" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 六宫格区域 -->
    <div class="grid-list">
      <nuxt-link class="grid-item" to="/news">
        <img src="~/static/1.png" alt="" />
        <span>新闻资讯</span>
      </nuxt-link>
      <nuxt-link class="grid-item" to="/shareimage">
        <img src="~/static/2.png" alt="" />
        <span>图片分享</span>
      </nuxt-link>
      <nuxt-link class="grid-item" to="/goods">
        <img src="~/static/3.png" alt="" />
        <span>商品购买</span>
      </nuxt-link>
      <div class="grid-item">
        <img src="~/static/4.png" alt="" />
        <span>留言反馈</span>
      </div>
      <div class="grid-item">
        <img src="~/static/5.png" alt="" />
        <span>视频专区</span>
      </div>
      <div class="grid-item">
        <img src="~/static/6.png" alt="" />
        <span>联系我们</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'cms',
  async asyncData({ params, $axios }) {
    // 定义轮播图数组
    let lunboList = []
    // 获取轮播图数据
    const { data: res } = await $axios.get('http://www.liulongbin.top:3005/api/getlunbo')
    // 判断数据请求是否成功
    if (res.status === 0) {
      // 当数据请求成功，为 lunboList 赋值
      lunboList = res.message
    }

    return {
      lunboList
    }
  }
}
</script>

<style lang="less" scoped>
.swiper-container {
  height: 150px;
  img {
    width: 100%;
    height: 100%;
  }
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
  .grid-item {
    width: 33.33%;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      display: block;
      width: 60px;
      height: 60px;
    }
    span {
      margin-top: 10px;
      font-size: 13px;
      color: #000;
    }
  }
}
</style>
